<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商练习</title>
    <style>
        
    </style>
    <link href="css/frist.css" type="text/css" rel="stylesheet">
    <link href="css/second.css" type="text/css" rel="stylesheet">
    <link href="css/thirdly.css" type="text/css" rel="stylesheet">
    <link href="css/fourthly.css" type="text/css" rel="stylesheet">
    <link href="css/fifth.css" type="text/css" rel="stylesheet">
</head>

<body>
    <div class="frist">                             <!--第一个盒子-->
        <header>
            <div class="con">
            <section class="left"></section>
            <section class="right">
                <a href="">登录</a>
                <a href="">注册</a>
            </section>
                </div>
        </header>
        <nav>
            <ul>
                <a class="one" href="">
                    <img src="images/sanxian.png">
                    <span>选项</span>
                    <img class="img" src="images/sanjiao.png">
                </a>
                <aside>
                    <span></span>
                    <ol class="zuo">
                        <li class="h1">护肤</li>
                        <li>洁面</li>
                        <li>爽肤水</li>
                        <li>精华</li>
                        <li>乳液</li>
                        <li class="h1">彩妆</li>
                        <li>BB 霜</li>
                        <li>卸妆</li>
                        <li>粉底液</li>
                        <li class="h1">香氛</li>
                        <li>女生香水</li>
                        <li>男士香水</li>
                        <li>中性香水</li>
                        <ol class="you">
                            <li class="h1">男士专区</li>
                            <li>洁面</li>
                            <li>爽肤水</li>
                            <li>面霜</li>
                            <li>精华</li>
                            <li class="h1">热门搜索</li>
                            <li>洗面奶</li>
                            <li>去黑头</li>
                            <li>隔离</li>
                            <li>面膜</li>
                        </ol>
                    </ol>
                    <img src="images/tu1.jpg" width="315px"> 
                </aside>
                <li class="center">
                    <from>
                        <input type="text" name="1"  placeholder="输入商品名">
                     </from>
                </li>
                <li class="right">
                    <a href="">&#xe68e;</a>
                    <a href="">&#xf012a;</a>
                    <a href="">&#xe608;</a>
                    <a href="">&#xe65e;</a>
                </li> 
            </ul>
        </nav>
        <video src="video/home_loop_720p.mp4" autoplay="ture" loop="ture"></video>
        <audio src="audio/home.ogg" autoplay="ture" loop="ture"></audio>
        <div class="zhong">
            <p>Select the right resolution for your PC and dive in!(请为您    的电脑选择正确的分辨率)</p>
            <ul>
                <li class="one"><span>&gt;</span>STANDARD标准</li>
                <li class="two"><span>&lt;</span>HD高清</li>
            </ul>
        </div>
    </div>
    
    
    
    
    <div class="second">                                <!--护肤-->
        <header>
            <h1><img src="images/new.jpg"></h1>
        </header>
        <p>补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养毛孔</p>
        <div class="bottom">
            <ul>
                <li>
                    <hgroup>
                        <h1>fresh skin 薏仁水</h1>
                        <h2>化妆水/爽肤水单品</h2>
                        <h1></h1>
                        <h1></h1>
                    </hgroup>
                </li>
                <li><hgroup>
                        <h1>蜂蜜原液天然滋养</h1>
                        <h2>美白护肤套装</h2>
                        <h1></h1>
                        <h1></h1>
                    </hgroup>
                </li>
                <li><hgroup>
                        <h1>纯情诱惑一抹惊艳</h1>
                        <h2>告别暗淡唇</h2>
                        <h1></h1>
                        <h1></h1>
                    </hgroup>
                </li>
            </ul>
         </div>
    </div>
    
    
    
    
    <div class="thirdly">                               <!--美肤-->
        <header>
            <h1><img src="images/shizhuang.jpg"></h1>
        </header>
        <p>美化容貌 增添自信 突出个性</p>
        <nav>
            <ul>
                <li>
                    <img src="images/try1.jpg" alt="try1">
                    <img src="images/try4.jpg" alt="try1">
                </li>
                <li>
                    <img src="images/try2.jpg" alt="try1">
                    <img src="images/try5.jpg" alt="try1">
                </li>
                <li>
                    <img src="images/try3.jpg" alt="try1">
                    <img src="images/try6.jpg" alt="try1">
                </li>
            </ul>
        </nav>
    </div>
    
    
    
    
    
    <div class="fourthly">                                  <!--评测-->
        <header>
            <h1><img src="images/cp.jpg"></h1>
        </header>
        <p>评测 我们更专业 用户更放心</p>
        <nav>
            <ul>
                <li>
                    <img src="images/cp1.jpg" alt="cp1">
                    <img src="images/th1.png" alt="th1">
                </li>
                <li>
                    <img src="images/cp2.jpg" alt="cp2">
                    <img src="images/th2.png" alt="th2">
                </li>
                <li>
                    <img src="images/cp3.jpg" alt="cp3">
                    <img src="images/th3.png" alt="th3">
                </li>
                <li>
                    <img src="images/cp4.jpg" alt="cp4">
                    <img src="images/th4.png" alt="th4">
                </li>
                <li>
                    <img src="images/cp5.jpg" alt="cp5">
                    <img src="images/th5.png" alt="th5">
                </li>
                <li>
                    <img src="images/cp6.jpg" alt="cp6">
                    <img src="images/th6.png" alt="th6">
                </li>
                <li>
                    <img src="images/cp7.jpg" alt="cp7">
                    <img src="images/th7.png" alt="th7">
                </li>
                <li>
                    <img src="images/cp8.jpg" alt="cp8">
                    <img src="images/th8.png" alt="th8">
                </li>
            </ul>
        </nav>
    </div>

    
    
    
                        
    <div class="fifth">                                     <!--表单-->
        <div class="top"></div>
        <hr width="70%">
        <div class="content">
            <form>
                <ul>
                    <li>
                        <p>姓名:</p>
                        <input type="text" placeholder="贵姓">
                    </li>
                    <li>
                        <p>电话:</p>
                        <input type="tel" pattern="^\d{11}$"  placeholder="请输入电话号码">
                    </li>
                    <li>
                        <p>邮箱:</p>
                        <input type="email" placeholder="请输入邮箱" pattern="^\w+([-+.]、w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
                    </li>
                    <li>
                        <p>密码:</p>
                        <input type="password" placeholder="请输密码" pattern="^[a-zA-Z]\w{5,17}$">
                    </li>
                    <li>
                        <input type="submit" value="">
                    </li>
                </ul>
            </form>
            <div class="right">
                <p>留言:</p> 
               <textarea></textarea>
            </div>
            <div class="bottom">                        <!--版权0-->
                良诚制作
            </div>
        </div>
    </div>
</body>
</html>
